<template>
  <div id="app">
    <transition name="fade">
      <load name="fade" v-if="!loaded"/>
    </transition>
    <ontology/>
    <panel v-show="build"/>
  </div>
</template>

<script>
import ontology from "./components/ontology.vue";
import panel from "./components/panel.vue";
import load from "./components/load.vue";
import store from './store.js'
export default {
  name: "app",
  components: {
    ontology,
    panel,
    load
  },
  data () {
    return {
      loaded: false
    }
  },
  computed: {
    build: {
      get () {
        return store.state.bui
      },
      set () {
      }
    },
    loadState: {
      get () {
        return store.state.loadState
      },
      set () {
      }
    }
  },
  watch: {
    loadState: function () {
      setTimeout(() => {
        this.loaded = true
      }, 1000)
    }
  },
  methods: {
    envJudge () {
      let href = location.href.split('?')
      if (href.length > 1 && href[1] === 'build' && window.innerWidth > 900) {
        console.log('buildEnv')
        store.commit("upload", { prope: "bui", data: true });
        if (href[2] === 'design') {
          console.log('designEnv')
          store.commit("upload", { prope: "design", data: true });
        }
      }
    }
  },
  mounted () {
    this.envJudge()
  }
};
</script>
<style lang="stylus">
@import 'assets/style/index.styl'
@import 'assets/style/clear.styl'
#app {
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
}
.fade-enter-active, .fade-leave-active {
  transition opacity 1s
}
.fade-enter, .fade-leave-to {
  opacity 0
}
</style>
